import { GridContent } from '@ant-design/pro-layout';
import { forwardRef, useEffect } from 'react';

// import { parse } from 'qs';
import './console.css';
import { useModel } from '@@/plugin-model/useModel';

const ConsoleLog: any = forwardRef(() => {
  let expandFlag = false;
  // // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // const params: any = parse(window.location.search, { ignoreQueryPrefix: true });

  // const [websocketLog, setWebsocketLog] = useState([])

  //
  // // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let timer: NodeJS.Timer | null = null;
  const consoleData = useModel('websocketdata');
  let lastIndex = 0;

  useEffect(() => {
    if (timer == null) {
      timer = setInterval(() => {
        slowToBottom();
      }, 80);
    }
  }, [consoleData.websocketData]);

  const slowToBottom = () => {
    let ele = document.querySelector('.log_container');
    if (ele) {
      // @ts-ignore
      if (lastIndex == ele.scrollTop && timer && lastIndex != 0) {
        clearInterval(timer);
        timer = null;
        return;
      }
      // @ts-ignore
      if (ele.scrollTop <= document.querySelector('.log_inner_container').offsetHeight) {
        ele.scrollTop = ele.scrollTop + 20;
        lastIndex = ele.scrollTop;
      } else {
        if (timer) {
          clearInterval(timer);
          timer = null;
        }
      }
    }
  };

  // @ts-ignore
  const toBottom = () => {
    let ele = document.querySelector('.log_container');
    if (ele) {
      // @ts-ignore
      ele.scrollTop = document.querySelector('.log_inner_container').offsetHeight;
    }
  };

  const expend = () => {
    if (expandFlag) {
      return;
    }
    expandFlag = true;
    const ele = document.querySelector('.console_log');
    if (ele) {
      ele.classList.remove('console_log_normal');
      ele.classList.add('console_log_width');
      setTimeout(() => {
        expandFlag = false;
      });
    }
  };
  const unExpend = () => {
    if (expandFlag) {
      return;
    }
    expandFlag = true;
    setTimeout(() => {
      const ele = document.querySelector('.console_log');
      if (ele) {
        ele.classList.add('console_log_normal');
        ele.classList.remove('console_log_width');
        expandFlag = false;
      }
    }, 200);
  };

  return (
    <GridContent>
      <div className={'console_log'} onMouseEnter={expend} onMouseLeave={unExpend}>
        <div className={'log_title'}>发布日志</div>
        <div className={'log_container'}>
          <div className={'log_inner_container'}>
            {consoleData.websocketData.map((item: PRO.publishLog, key) => {
              return (
                <div className={'log_item'} key={key}>
                  <div className={'server_name'}>{item.server_name}:</div>
                  <div className={'log_content'}>
                    <div>
                      <pre>{item.content}</pre>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </GridContent>
  );
});

export default ConsoleLog;
